<template>
  <div class="MusicTopic">
    <div class="item" @click="topicDetail(item.actId)" v-for="(item, index) in topicList" :key="index">
      <div class="left">
        <img v-lazy="item.sharePicUrl+'?param=100y100'" alt="" />
      </div>
      <div class="right">
        <div class="box">
          <div class="title"># {{ item.title }} #</div>
          <div class="text">{{ item.participateCount }} 人参与</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script  type='module'>
export default {
  name: 'CloudVillageHot',
  props: {
    topicList: Array
  },
  data () {
    return {
    }
  },
  methods: {
    topicDetail (id) {
      this.$router.push('/topicDetail/' + id)
    }
  }
}

</script>

<style lang="less" scoped>
.MusicTopic {
  width: 100%;
  background-color: #fff;
}
.item {
  width: 100%;
  height: 1.331558rem;
  border-radius: 0.266312rem;
  display: flex;
  background-color: #fff;
  border-radius: 0.133156rem;
  overflow: hidden;
  margin-bottom: 0.372836rem;
  box-sizing: border-box;
}
.left {
  flex: 1.7;
  margin-right: 8px;
}
.left img {
  width: 1.331558rem;
  height: 1.331558rem;
  border-radius: 0.133156rem;
}
.right {
  flex: 8.3;
  display: flex;
  align-items: center;
}
.box {
  width: 100%;
}
.title {
  width: 7.456724rem;
  height: 0.45273rem;
  line-height: 0.45273rem;
  font-size: 0.399467rem;
}
.text {
  width: 7.456724rem;
  height: 0.372836rem;
  line-height: 0.372836rem;
  font-size: 0.319574rem;
  color: rgb(139, 139, 139);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
